<template>
  <view class="content">
    <uni-nav-bar
      title="商品详情"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view class="hd-banner">
      <image :src="pageData && pageData.imgurl" lazy-load></image>
    </view>

    <view
      class="banner-up c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc107.png')})`
      }"
    >
      <view class="rule-price">
        <view class="rule">
          <image :src="$img('/static/img2/cc108.png')" lazy-load></image>
        </view>

        <view
          class="price c_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc48.png')})`
          }"
        >
          ¥
          <text>{{ (pageData && pageData.price) || '0' }}</text>
        </view>
      </view>

      <view class="title">
        <view class="hang2">
          {{ (pageData && pageData.title) || '-' }}
        </view>
      </view>
    </view>

    <view class="detail-title">
      <view class="line"></view>

      <text>商品详情</text>

      <view class="line"></view>
    </view>

    <view v-if="pageData" class="detail-content">
      <view v-html="pageData.content"></view>
    </view>

    <view
      class="b-fixed c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc78.png')})`
      }"
      @click="getSku()"
    >
      立即购买
    </view>

    <uni-popup ref="skuPop" type="bottom">
      <view
        v-if="pageData && skuData"
        class="sku-pop c_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc71.png')})`
        }"
      >
        <view class="sku-pop-hd">
          选择规格

          <view class="close icon" @click="$refs.skuPop.close()">
            <image :src="$img('/static/img2/cc75.png')" lazy-load></image>
          </view>
        </view>

        <view class="hd-line"></view>

        <view class="goods-info">
          <view class="pic">
            <image :src="skuData.imgurl" lazy-load></image>
          </view>

          <view class="info">
            <view class="title hang1">
              {{ skuData.sku }}
            </view>

            <view class="price">¥{{ skuData.price }}</view>

            <view class="stock">库存:{{ skuData.stock }}</view>
          </view>
        </view>

        <scroll-view
          scroll-y
          :style="{
            'max-height': `500rpx`
          }"
        >
          <view class="sku-box" v-for="(item, i) in pageData.sku" :key="i">
            <view class="sku-title">{{ item.norms_name }}</view>

            <view class="sku-list">
              <view
                class="sku-item"
                v-for="(a, b) in item.norms_values"
                :key="b"
                :class="{
                  act: i == 0
                }"
                @click="specChange(i, a)"
              >
                {{ a.name }}
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="buy-num">
          <view class="title">购买数量</view>

          <view class="num-box">
            <view class="icon" @click="jian()">
              <image :src="$img('/static/img2/cc111.png')" lazy-load></image>
            </view>

            <input v-model="buy_num" placeholder="0" @blur="checkGoodsNum()" />

            <view class="icon" @click="jia()">
              <image :src="$img('/static/img2/cc112.png')" lazy-load></image>
            </view>
          </view>
        </view>

        <view
          class="buy-btn c_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc78.png')})`
          }"
          @click="toBuy()"
        >
          确认购买
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      optData: '',
      pageData: '',
      skuData: '',
      specCurs: [],

      buy_num: 1
    }
  },

  onLoad(options) {
    this.optData = options
    this.getData()
  },

  onReady() {
    // this.$refs.skuPop.open()
  },

  methods: {
    /* 检查赏品选择数量 */
    checkGoodsNum() {
      if (this.buy_num <= 1) {
        this.buy_num = 1
        return
      }

      if (this.buy_num >= this.skuData.stock) {
        this.buy_num = Number(this.skuData.stock)
        return
      }
    },

    /* 赏品数量加 */
    jia() {
      if (this.buy_num >= this.skuData.stock) {
        this.buy_num = Number(this.skuData.stock)
        return
      }

      this.buy_num = Number(this.buy_num) + 1
    },

    /* 赏品数量减 */
    jian() {
      if (this.buy_num <= 1) {
        this.buy_num = 1
        return
      }
      this.buy_num = Number(this.buy_num) - 1
    },

    toBuy() {
      this.$refs.skuPop.close()
      this.$c.to({
        url: '/package/mall/buy',
        query: {
          product_id: this.pageData.id,
          // address_id:,
          buy_num: this.buy_num,
          sku_id: this.skuData.id
        }
      })
    },

    /**
     * @description: 选择规格
     * @return {*}
     */
    specChange(i, a) {
      this.specCurs[i] = a.name

      // console.log(this.specCurs)

      this.getSku()
    },

    /* 获取规格 */
    getSku() {
      this.req({
        url: '/product_norms',
        data: {
          product_id: this.optData.id,
          sku: this.specCurs.join(',')
        },
        success: res => {
          if (res.status == 1) {
            this.skuData = res.data
            this.$refs.skuPop.open()
          }
        }
      })
    },

    /**
     * @description: 获取数据
     * @return {*}
     */
    getData() {
      this.req({
        url: '/product_detail',
        data: {
          product_id: this.optData.id
        },
        success: res => {
          if (res.status == 1) {
            res.data.product.content = res.data.product.content.replace(
              /\<img/gi,
              '<img style="width: 100%;vertical-align: middle;"'
            )

            this.pageData = res.data.product
            let arr = res.data.product.sku.map(item => {
              return item.norms_values[0].name
            })
            this.specCurs = arr
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  /deep/.uni-navbar__placeholder {
    display: none;
  }

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hd-banner {
    width: 100%;
    height: 750rpx;
  }

  .banner-up {
    position: relative;
    z-index: 1;
    margin: -194rpx 0 0;
    width: 100%;
    height: 260rpx;

    .rule-price {
      padding: 14rpx 18rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .rule {
        width: 188rpx;
        height: 28rpx;
      }

      .price {
        width: 202rpx;
        height: 84rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 10rpx 0 0 10rpx;

        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
        text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
      }
      .c_bg {
      }
    }

    .title {
      padding: 30rpx 30rpx 0;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;
      .hang2 {
      }
    }
    .hang2 {
    }
  }
  .c_bg {
  }

  .detail-title {
    display: flex;
    justify-content: center;
    align-items: center;

    .line {
      width: 128rpx;
      height: 1rpx;
      background: #ffffff;
    }

    text {
      padding: 0 10rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }

  .detail-content {
    padding: 30rpx 0 150rpx;
  }

  .b-fixed {
    width: 690rpx;
    height: 92rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 30rpx;
    bottom: 40rpx;
    z-index: 10;

    font-family: 光良酒-干杯体, 光良酒-干杯体;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  }

  .sku-pop {
    padding: 0 30rpx 30rpx;
    box-sizing: border-box;
    background-size: 100% auto;

    .sku-pop-hd {
      padding: 20rpx 0 0;
      padding-left: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 36rpx;
      color: #ffffff;
      text-shadow: 0 0 2px #e40d1d, 0 0 2px #e40d1d, 0 0 2px #e40d1d,
        0 0 2px #e40d1d;

      .close {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .hd-line {
      width: 690rpx;
      height: 2rpx;
      background: #ffffff;
      margin: 20rpx auto;
    }

    .goods-info {
      display: flex;
      align-items: center;
      padding: 0 0 20rpx;

      .pic {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        border: 2rpx solid #000000;
      }

      .info {
        width: calc(100% - 160rpx);
        box-sizing: border-box;
        padding-left: 20rpx;

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
        }
        .hang1 {
        }
        .price {
          padding: 10rpx 0;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #e40d88;
        }

        .stock {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #cccccc;
        }
      }
    }

    .sku-box {
      padding: 20rpx 0 0;

      .sku-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }

      .sku-list {
        display: flex;
        flex-flow: row wrap;
        padding: 1rpx 0 0;

        .sku-item {
          min-width: 140rpx;
          height: 48rpx;
          padding: 0 20rpx;
          box-sizing: border-box;
          margin-top: 20rpx;
          margin-right: 20rpx;
          display: flex;
          align-items: center;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #666666;
          border: 2rpx solid #333333;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #cccccc;

          &.act {
            background: #e40d1d;
            border: 2rpx solid #fff;

            color: #fff;
          }
        }
        .c_bg {
        }
      }
    }

    .buy-num {
      padding: 30rpx 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }

      .num-box {
        display: flex;
        align-items: center;

        .icon {
          width: 36rpx;
          height: 36rpx;
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 200%;
            height: 200%;
            position: absolute;
            left: -50%;
            top: -50%;
            z-index: 1;
          }
        }

        input {
          width: 90rpx;
          text-align: center;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
        }
      }
    }

    .buy-btn {
      margin: 90rpx 0 0;
      width: 100%;
      height: 92rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 32rpx;
      color: #ffffff;
      text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
    }
    .c_bg {
    }
  }
}
</style>
